import {
  Box,
  Flex,
  HStack,
  Icon,
  IconButton,
  Image,
  Stack,
  Text,
  Tooltip,
  useColorModeValue,
  useToast,
} from '@chakra-ui/react';

import { useTranslation } from 'react-i18next';
import { BiImageAdd } from 'react-icons/bi';
import { GoChevronRight } from 'react-icons/go';
import { MdEditNote } from 'react-icons/md';

import DeletePopover from './DeletePopover';
// import EditModal from './EditModal';
import Status, { STATUS_MAP } from './ModelStatus';

import trainService from '@/api/train.service';
import IAIIconButton from '@/common/components/IAIIconButton';
import { ModelTraining } from '@/pages/Training/Model';
const sx = {
  display: '-webkit-box',
  WebkitLineClamp: '2',
  WebkitBoxOrient: 'vertical',
  overflow: 'hidden',
};
const ModelItem = (props: {
  model: ModelTraining;
  modalOnOpen: (model: ModelTraining) => void;
  modalOnEdit: (model: ModelTraining) => void;
}) => {
  const { t } = useTranslation();
  const {
    name,
    modelDesc,
    status = '1',
    imgDtoList,
    id,
    type,
    remainTime,
  } = props.model;

  const IMAGE_SRC =
    Array.isArray(imgDtoList) && imgDtoList[0] ? imgDtoList[0].imgPath : null;

  const _status = STATUS_MAP[status as keyof typeof STATUS_MAP];
  const toast = useToast();
  const handleUseModel = () => {
    trainService.useModel({ modelId: id }).then(({ code }) => {
      if (code === 200) {
        toast({
          position: 'top',
          description: '模型已添加到模型选择列表，请到绘画页面切换使用模型！',
          status: 'success',
          duration: 5000,
          isClosable: true,
        });
      }
    });
  };

  return (
    <Box
      key={name}
      role="group"
      p={6}
      pb={3}
      w="full"
      bg={useColorModeValue('baseAlpha.950', 'base.850')}
      boxShadow="2xl"
      rounded="lg"
      pos="relative"
      zIndex={1}
    >
      <Box
        rounded="lg"
        mt={-12}
        pos="relative"
        height="15rem"
        _after={{
          transition: 'all .3s ease',
          content: '""',
          w: 'full',
          h: 'full',
          pos: 'absolute',
          top: 5,
          left: 0,
          backgroundImage: `url(${IMAGE_SRC})`,
          filter: 'blur(15px)',
          zIndex: -1,
        }}
        _groupHover={{
          _after: {
            filter: 'blur(20px)',
          },
        }}
      >
        <Image
          w="full"
          objectFit="contain"
          rounded="lg"
          h="full"
          src={IMAGE_SRC}
          loading="lazy"
        />
      </Box>
      <Stack pt={6}>
        <Status status={_status || 'processing'} remainTime={remainTime} />
        <Text
          color="base.100"
          fontWeight="bold"
          fontSize="2xl"
          overflow="hidden"
          textOverflow="ellipsis"
          whiteSpace="nowrap"
        >
          {name}
        </Text>
        <Text height="3rem" color="base.300" fontSize="md" sx={sx}>
          {modelDesc}
        </Text>
        <Flex justify="space-between">
          <Flex justify="center">
            {_status === 'done' && (
              <>
                <Tooltip
                  label={t('training.useModel')}
                  hasArrow
                  placement="top"
                >
                  <IconButton
                    color="base.400"
                    aria-label=""
                    icon={<BiImageAdd />}
                    size="xs"
                    onClick={handleUseModel}
                    fontSize={20}
                    variant="ghost"
                    rounded="sm"
                    _hover={{
                      bg: 'base.900',
                      color: 'base.200',
                    }}
                  />
                </Tooltip>
                <IAIIconButton
                  aria-label={t('training.editModel')}
                  tooltip={t('training.editModel')}
                  onClick={() => props.modalOnEdit(props.model)}
                  fontSize={22}
                  variant="ghost"
                  size="xs"
                  rounded="sm"
                  color="base.400"
                  _hover={{
                    bg: 'base.900',
                    color: 'base.200',
                  }}
                  icon={<MdEditNote />}
                />
              </>
            )}

            <DeletePopover id={id} />
          </Flex>

          {/* {(_status !== 'done' || Number(type) === 2) && <Box></Box>} */}
          {imgDtoList && (
            <HStack
              alignSelf="end"
              spacing={1}
              p={1}
              cursor="pointer"
              alignItems="center"
              height="1.5rem"
              w="max-content"
              color="base.400"
              rounded="sm"
              onClick={() => props.modalOnOpen(props.model)}
              _hover={{ bg: 'base.900' }}
            >
              <Text fontSize="xs">{t('training.showMore')}</Text>
              <Icon as={GoChevronRight} w={4} h={4} />
            </HStack>
          )}
        </Flex>
      </Stack>
    </Box>
  );
};

export default ModelItem;
